<template>
  <div class="barchart-container">
    <div class="tooltip"></div>
  </div>
</template>
<script>
import barChart from "../../charts/barchart/index.js";
import bus from "../../bus";
import { mapGetters, mapState } from "vuex";

export default {
  name: "AppDirectionBar",
  watch: {
    // 监听数据的变化，一旦有了数据则立即更新视图
    // 不应采用xxx.remove()的方法将整个视图重新绘制
    // 所有被监听的数据，均为Vuex中的state
    data() {
      barChart.update(this.template, this.data);
    },
    // 当检测到左右侧边栏的关闭/打开时，更新视图，但不需加入数据
    // 所有数据在第一次update时，都应保存至this.xxxx 中
    left() {
      barChart.update();
    },
    right() {
      barChart.update();
    },
    config() {
      barChart.update(null, null, this.config);
    }
  },
  mounted() {
    // 初始化柱状图
    // 每个组件挂载时仅仅调用init方法，并不真正绘制视图
    barChart.init({
      target: ".barchart-container",
      margin: { top: 40, right: 60, bottom: 60, left: 60 }
    });
  },
  computed: {
    // 如下为获取对应state的方法
    // mapGetters 返回一个对象，因此使用...运算符将此对象展开
    // this.template 被映射为
    // computed : {
    //  template() {
    //  return this.$store.getters['api/getTemplate']
    // }
    // }
    ...mapGetters({
      template: "api/getTemplate",
      data: "api/getIndustries",
      left: "layout/getShowLeft",
      right: "layout/getShowRight",
      config: "viewOne/getConfig"
    })
  }
};
</script>
<style>
.barchart-container {
  height: 350px;
}
</style>

